<template>
	<view>



		<view class="cu-form-group padding flex flex-direction" v-if="qrcode ==''" style="padding: 113px 10px;">
			<button class="cu-btn line-yellow" @tap="creataddr()">{{i18n.set.creategoogle}}</button>
		</view>

		<view class="cu-list grid col-1 no-border" v-if="qrcode!=''">
			<view class="cu-form-group padding flex flex-direction uni-h6">
				{{i18n.set.tips1}}
			</view>

			<!-- <view class="">
				<canvas canvas-id="qrcode" style="width: 150px;height: 150px;margin: 0 auto;" />
			</view> -->
			<view class="">
				<image :src="qrcode" mode="aspectFit"></image>
			</view>
			<view class="cu-form-group padding flex flex-direction uni-h6">
				{{i18n.set.tips2}}
			</view>
			<!-- <view class="cu-item text-left">
				<text class="text-xs nowrap" style="margin-left: 9px;">{{i18n.charge.address}}</text>
				<view style="margin-left: 9px;">
					<view class="text-lg text-cut row">{{addr}}</view>
				</view>

			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-yellow lg" @tap="copy">{{i18n.share.copy2}}</button>
			</view> -->
			
			<view style="margin: 10px;">
				<!-- <view class="cu-form-group t-t1">
					<view class="title">{{i18n.cash.addr}}</view> 
			
				</view> -->
				<view class="cu-form-group t-t2">
			
					<input type="text" :value="addr"  disabled="true"  >
					<button class='cu-btn line-yellow round sm' @tap="copy">{{i18n.share.copy2}}</button>
				</view>
			</view>
			<!-- <view class="flex-sub  ">
				<view class="solid-bottom text-xs padding">
					{{i18n.charge.INFO}}
				</view>
			</view> -->

		</view>

		<view style="margin: 10px;">
			<view class="cu-form-group t-t1">
				<view class="title">{{i18n.set.googlecode}}</view>

			</view>
			<view class="cu-form-group t-t2">
				<input type="number" :placeholder="i18n.set.inputgooglecode" v-model="form.code"></input>

			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-yellow lg" @tap="submit">{{i18n.set.confirm}}</button>
		</view>

		<!-- <view class="cu-form-group padding flex flex-direction uni-h6">
			{{i18n.charge.INFO}}
		</view> -->

		<!-- <view class="padding flex flex-direction">
			<button class="cu-btn bg-yellow lg" @tap="submit">{{i18n.charge.confirm}}</button>
		</view> -->


	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				// picker: ['BTC', 'ETH', 'EMP'],
				type: 'trc20',
				addr: '',
				imgList: [],
				form: {
					number: '',
					payimage: '',
					ptype1: '',
					code: "",
				},
				index: 0,
				address: [],
				qrcode: '',

			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			rule() {
				return this.myconfig.charge;
			},
			charge_rate() {
				return this.myconfig.charge_rate;
			},
			cointype2() {
				return this.myconfig.cointype2;
			},
			i18n() {
				return this.$t('message');
			},
			picker() {
				let arr = [];
				for (let key in this.rule) {
					arr.push(key)
				}
				return arr;
			},
			price() {
				return this.form.number * this.charge_rate[this.type];
			},

		},
		onLoad() {
			// uni.setNavigationBarTitle({
			// 	title: this.i18n.charge.title
			// });
			this.myConfig().catch(e => {});
			// this.addr = this.get_object_first(this.rule);
			// this.form.ptype1 = this.cointype2[this.type];
			this.form.ptype1 = 'wall1';

			// this.make();
		},
		onShow() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
			// this.getaddr();
		},
		methods: {
			...mapActions(['myConfig', 'getUserinfo']),
			PickerChange(e) {
				console.log(e.detail.value)
				this.index = e.detail.value;
				this.type = this.picker[this.index];
				this.addr = this.rule[this.type];
				// // this.form.ptype1 = this.cointype2[this.type];
				this.form.ptype1 = 'wall1';
				this.make();
			},
			get_object_first(data) {
				for (var key in data)
					return data[key];
			},
			make() {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.addr,
					size: 150,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					// success: res => {
					// 	console.log(res)
					// }
				})
			},
			copy() {
				// #ifdef H5
				console.log('h5-copy')
				this.copyTitle(this.addr);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: this.addr,
					success: function() {
						console.log('success');
						this.$api.msg(this.i18n.popup.success)
					}
				});
				// #endif

			},
			copyTitle(txt) {
				var input = document.createElement("input"); // 创建一个新input标签
				input.setAttribute("readonly", "readonly"); // 设置input标签只读属性
				input.setAttribute("value", txt); // 设置input value值为需要复制的内容
				document.body.appendChild(input); // 添加input标签到页面
				input.select(); // 选中input内容
				input.setSelectionRange(0, 9999); // 设置选中input内容范围
				document.execCommand("copy"); // 复制
				document.body.removeChild(input); // 删除新创建的input标签
				// 只是提示作用。
				this.$api.msg(this.i18n.popup.success)
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						uni.uploadFile({
							url: this.$host + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (re) => {
								let rr = JSON.parse(re.data)
								console.log(rr)
								if (rr.code) {
									this.imgList.push(res.tempFilePaths[0]);
									this.form.payimage = rr.data.url;
								}
							},
							error: function(res) {
								console.log(res)
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm2,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.form.payimage = '';
						}
					}
				})
			},
			submit() {
				if (!this.form.code) {
					this.$api.msg(this.i18n.set.inputgooglecode);
					return false
				}
				if (!this.userinfo.password3) {
					this.$api.msg(this.i18n.set.inputgooglecode);
					return false
				}
				this.$http.post('user.googleverifyCode', this.form).then(res => {
					if (res.code == 1) {
						this.getUserinfo(); 
						
						uni.showToast({
							title: this.i18n.popup.success
						})
						
						setTimeout(() => {
							this.$api.prePage()
						}, 800)
					} 
				})
			},
			getaddr() {

			},
			creataddr() {
				let send = {
					type: 1
				}
				this.$http.post('user.createSecret', send).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.address = res.data.secret;
						this.addr = res.data.secret;
						// this.make();
						this.qrcode = res.data.qrCodeUrl
					}

				})
			},
			changetype(name) {
				this.type = name;
				this.addr = this.address[this.type + 'address'];
				this.make();
			}
		}
	}
</script>

<style>

</style>
